<template>
  <!-- 运维管理 -->
  <div class="app-container">
    <div class="title">
      <span class="title_span">工单编号:</span>
      <el-input v-model="queryObj.taskCode" placeholder="请输入" style="width: 200px" size="small" clearable />
      <span class="title_span">工单状态:</span>
      <el-select v-model="queryObj.status" placeholder="请选择" size="small" style="width: 200px;margin-right:10px" clearable>
        <el-option
          v-for="item in options"
          :key="item.statusId"
          :label="item.statusName"
          :value="item.statusId"
        />
      </el-select>
      <el-button type="primary" icon="el-icon-search" size="small" @click="search">查询</el-button>
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-button
        type="warning"
        icon="el-icon-circle-plus-outline"
        size="small"
        style="background-color: #ff6726;margin-bottom:20px"
        @click="addOrder"
      >新建</el-button>

      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
      >
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">
            <span>{{ scope.$index+(queryObj.pageIndex - 1) * queryObj.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskCode" label="工单编号" width="125" />
        <el-table-column prop="innerCode" label="设备编号" width="115" />
        <el-table-column prop="taskType.typeName" label="工单类型" width="110" />
        <el-table-column prop="createType" label="工单方式" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.createType? '手动':'自动' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskStatus" label="工单状态" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.taskStatus===1? '待办':scope.row.taskStatus===2? '进行':scope.row.taskStatus===3? '取消':'完成' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="运营人员" width="110" />
        <el-table-column prop="createTime" label="创建日期" width="150" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="viewDetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <PageTool v-if="tableData.length" class="foot" :info="queryObj" @handleCurrentChange="handleCurrentChange" />
    </div>

    <!-- 新增弹窗 -->
    <DialogLm ref="add" />

    <!-- 详情弹窗 -->
    <OrderDetail ref="order" @gitlist="getOperatioList" />
  </div>
</template>

<script>
import { getList, getTaskStatusList } from '@/api/lmoperation'
// 引入处理时间格式的插件
import moment from 'moment'

import DialogLm from './components/dialog.vue'
import OrderDetail from './components/orderDetail.vue'
// 分页组件
import PageTool from '@/views/equipment/components/page-tool.vue'

export default {
  name: '',
  components: {
    DialogLm,
    OrderDetail,
    PageTool
  },
  props: {},
  data() {
    return {
      loading: false,
      // 工单状态
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      // 表单数据
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        status: '', // 工单状态
        taskCode: '',
        totalPage: 10,
        totalCount: 10,
        isRepair: true
      }
    }
  },
  created() {
    this.getOperatioList()
    this.getTaskStatus()
  },
  methods: {
    // 获取列表
    async getOperatioList() {
      this.loading = true
      const data = await getList(this.queryObj)
      // console.log(data)
      this.tableData = data.currentPageRecords

      this.tableData.forEach(item => {
        item.createTime = moment(item.createTime).format('YYYY.MM.DD HH:mm:ss')
      })

      this.queryObj.pageIndex = data.pageIndex
      this.queryObj.pageSize = data.pageSize
      this.queryObj.totalCount = data.totalCount
      this.queryObj.totalPage = data.totalPage

      this.loading = false
    },
    // 新增
    addOrder() {
      this.$refs.add.openDialog()
    },
    // 查看详情
    viewDetails(row) {
      // console.log(row)
      this.$refs.order.openDialogK()

      this.$nextTick(() => {
        this.$refs.order.getOrdersDetail(row.taskId)
      })
    },
    // 获取工单状态列表
    async getTaskStatus() {
      const data = await getTaskStatusList()
      this.options = data
    },
    // 搜索
    async search() {
      this.loading = true
      const data = await getList(this.queryObj)
      this.tableData = data.currentPageRecords

      this.queryObj.totalCount = data.totalCount
      this.queryObj.totalPage = data.totalPage

      this.loading = false
    },
    handleCurrentChange(val) {
      this.queryObj.pageIndex = val
      this.getOperatioList()
    }
  }
}
</script>
<style scoped lang='scss'>
.title {
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-top: 50px;
  margin-bottom: 20px;
  padding-left: 5px;
  background-color: #fff;
  .title_span{
    font-size: 14px;
    color: #606266;
    margin-right: 10px;
    margin-left: 10px;
  }
}
.table{
  width: 100%;
  padding: 10px 15px 30px;
  background-color: #fff;
}
</style>

